<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>开启头部工具栏 - 数据表格</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
</head>
<body>


<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">批次列表</div>
                <div class="layui-card-body">


                    <!--搜索-->

                    <div class="layui-form" action="form.html">
                        <div class="layui-form-item">
                            <from class="layui-form" action="form.html">
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <input type="text" id="querySn" name="phone" lay-verify="required|phone"
                                               autocomplete="off" class="layui-input" placeholder="批次名称">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <select name="interest" id="queryRolePoor" lay-filter="aihao">
                                            <option value="">困难等级</option>
                                            <option value="不困难">不困难</option>
                                            <option value="一般困难">一般困难</option>
                                            <option value="特殊困难">特殊困难</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <select name="interest" id="queryAction" lay-filter="aihao">
                                            <option value="">状态选择</option>
                                            <option value="1">已激活</option>
                                            <option value="0">未激活</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button class="layui-btn" id="queryBtn">查询</button>
                                </div>
                                <div class="layui-inline">
                                    <button type="reset" id="resetBtn" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                                <div class="layui-inline">
                                    <button class="layui-btn" id="insertBtn">新建批次</button>
                                </div>
                            </from>
                        </div>

                        <table class="layui-hide" id="test-table-toolbar" lay-filter="test-table-toolbar"></table>

                        <script type="text/html" id="test-table-toolbar-toolbarDemo">
                            <div class="layui-btn-container">
                                <button class="layui-btn layui-btn-sm" lay-event="getCheckData">删除选中</button>
                                <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                                <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
                            </div>
                        </script>

                        <script type="text/html" id="activeState">
                            {{d.active == false?'未激活':'已激活'}}
                        </script>

                        <script type="text/html" id="test-table-toolbar-barDemo">
                            <!--<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>-->
                            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">结束批次</a>
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-form" id="editUserDialog" style="display: none;padding: 20px;">
        <div class="layui-form-item">
            <label class="layui-form-label">批次名称：</label>
            <div class="layui-input-block">
                <input type="text" id="editSn" autocomplete="off" placeholder="请输入批次名称" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">申请时间：</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="ID-laydate-demo" placeholder="yyyy-MM-dd">
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">选衣时间：</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="ID-laydate-demo1" placeholder="yyyy-MM-dd">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">困难等级：</label>
            <div class="layui-form">
                <input type="radio" name="AAA" value="不困难" title="不困难">
                <input type="radio" name="AAA" value="一般困难" title="一般困难">
                <input type="radio" name="AAA" value="特殊困难" title="特殊困难">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-primary" id="cancelBtn">取消</button>
                <button type="button" class="layui-btn" lay-submit="" id="subBtn" lay-filter="demo1">立即提交</button>
            </div>
        </div>
    </div>

    <script src="../../../layuiadmin/layui/layui.js"></script>
    <script>
        layui.config({
            base: '../../../layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'table', 'form', 'laydate'], function () {
            var admin = layui.admin,
                $ = layui.$,
                form = layui.form,
                laydate = layui.laydate
                , table = layui.table;
            laydate.render({
                elem: '#ID-laydate-demo',
                range: '至'
            });

            laydate.render({
                elem: '#ID-laydate-demo1',
                range: '至'
            });

            table.render({
                elem: '#test-table-toolbar'
                , url: '/batchSetting/list'
                , parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.data.total, //解析数据长度
                        "data": res.data.records //解析数据列表
                    };
                },
                request: {
                    pageName: 'pageNo' //页码的参数名称，默认：page
                    , limitName: 'pageSize' //每页数据量的参数名，默认：limit
                }
                , toolbar: '#test-table-toolbar-toolbarDemo'
                , title: '用户数据表'
                , cols: [
                    [
                        {type: 'checkbox', fixed: 'left'},
                        {field: 'id', title: '序号'}
                        , {field: 'name', title: '批次名称'}
                        , {field: 'applicationStartDate', title: '申请开始时间'}
                        , {field: 'applicationEndDate', title: '申请结束时间'}
                        , {field: 'registerStartDate', title: '选衣开始时间'}
                        , {field: 'registerEndDate', title: '选衣结束时间'}
                        , {field: 'difficultyLevel', title: '困难等级级别'}
                        , {field: 'active', title: '状态', templet: '#activeState'}
                        , {fixed: 'right', title: '操作', toolbar: '#test-table-toolbar-barDemo', width: 150}
                    ]
                ]
                , page: true
            });

            //重置按钮

            $('#resetBtn').click(function () {
                $.ajax({
                    type: 'post',
                    url: '/batchSetting/reset',
                    success: function (res) {
                        if (res.data == true) {
                            layer.msg('重置成功', {
                                icon: 1,
                                time: 1500
                            }, function () {
                                // 重新刷新表格
                                table.reload('test-table-toolbar', {
                                    url: '/batchSetting/list'
                                    , where: {} //设定异步数据接口的额外参数
                                });
                                // 关闭弹框
                                layer.closeAll()
                            });
                        }
                    }
                })
            })






            //查询按钮
            $("#queryBtn").click(function () {
                table.reload('test-table-toolbar', {
                    url: '/batchSetting/list'
                    , where: {
                        name: $("#querySn").val(),
                        difficultyLevel: $("#queryRolePoor").val(),
                        active: $("#queryAction").val()
                    } //设定异步数据接口的额外参数
                });
            })


            $("#insertBtn").click(function () {
                layer.open({
                    type: 1,
                    area: '500px',
                    title: '新建批次',
                    content: $("#editUserDialog")
                })
                table.reload('test-table-toolbar', {
                    url: '/batchSetting/list'
                    // ,where: {
                    //     sn: $("#querySn").val(),
                    //     name: $("#queryName").val(),
                    //     roleId: $("#queryRoleId").val()
                    // } //设定异步数据接口的额外参数
                });
            })
            //头工具栏事件
            table.on('toolbar(test-table-toolbar)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'getCheckData':
                        var data = checkStatus.data;
                        var idList = [];
                        for (var i = 0; i < data.length; i++) {
                            var element = data[i].id;
                            //var id = parseInt(element);
                            idList.push(element);
                        }
                        if(idList!=0){
                            dellistEvent(idList);
                        }
                        //layer.alert(JSON.stringify(data.id));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：' + data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选' : '未全选');
                        break;
                }
                ;
            });

            function dellistEvent(idList) {
                layer.confirm('确认删除选中数据吗?', {icon: 3, title:'提示'}, function(index){
                    $.ajax({
                        type: 'post',
                        url: '/batchSetting/removeList',
                        contentType: 'application/json',
                        data: JSON.stringify({ idList: idList }),
                        success: function (res) {
                            if(res.data == true){
                                layer.msg('删除成功', {
                                    icon: 1,
                                    time: 1500
                                },  function () {
                                    // 重新刷新表格
                                    table.reload('test-table-toolbar', {
                                        url: '/batchSetting/list'
                                        ,where: {} //设定异步数据接口的额外参数
                                    });
                                });
                            }
                        },
                        error: function () {
                            layer.msg('删除失败', {
                                icon: 1,
                                time: 1000
                            });
                        },
                    })
                },function () {

                });
            }

            //监听行工具事件
            table.on('tool(test-table-toolbar)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('确认删除选中数据吗?', {icon: 3, title:'提示'}, function(index){
                        $.ajax({
                            type: 'get',
                            url: '/batchSetting/removeById?id='+data.id,
                            success: function (res) {
                                if(res.data == true){
                                    layer.msg('删除成功', {
                                        icon: 1,
                                        time: 1500
                                    }, function () {
                                        // 重新刷新表格
                                        table.reload('test-table-toolbar', {
                                            url: '/batchSetting/list'
                                            ,where: {} //设定异步数据接口的额外参数
                                        });
                                    });
                                }
                            }
                        })
                    },function () {

                    });
                }
            });


            // 点击提交
            $('#subBtn').click(function () {
                var times = $("#ID-laydate-demo").val().split(' 至 ')
                var times1 = $("#ID-laydate-demo1").val().split(' 至 ')
                var selectedValue = $('input[name="AAA"]:checked').val();
                $.ajax({
                    type: 'post',
                    url: '/batchSetting/insert',
                    data: {
                        name: $("#editSn").val(),
                        applicationStartDate: times[0],
                        applicationEndDate: times[1],
                        registerStartDate: times1[0],
                        registerEndDate: times1[1],
                        difficultyLevel: selectedValue
                    },
                    success: function (res) {
                        if (res.data == true) {
                            layer.msg('插入成功', {
                                icon: 1,
                                time: 1500
                            }, function () {
                                // 重新刷新表格
                                table.reload('test-table-toolbar', {
                                    url: '/batchSetting/list'
                                    , where: {} //设定异步数据接口的额外参数
                                });
                                // 关闭弹框
                                layer.closeAll()
                            });
                        }
                    }
                })
            })

            // 点击取消
            $("#cancelBtn").click(function () {
                layer.closeAll()
            })

        });
    </script>
</body>
</html>